<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{
			border: 1px solid #333;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400" id="canvas"></canvas>
	<script type="text/javascript">
		//相当于拿到一张纸
		var canvas=document.getElementById("canvas");
		//获取画笔
		var ctx=canvas.getContext("2d");

		//原点绘制矩形
		ctx.beginPath()
		ctx.fillStyle="red"
		ctx.fillRect(0,0,50,50)

		//右下角移动
		var x=0,y=0;
		var yTag=1,xTag=1;		//yTag=1 y累加；yTag=0 y累减
		setInterval(()=>{
			ctx.clearRect(x,y,50,50)
			// x++;
			// y++;
			if(xTag==1){
				x++
			}else{
				x--
			}

			if(x>=550){
				xTag=0
			}

			if(x<=0){
				xTag=1;
			}

			if(yTag==1){
				y++
			}else{
				y--;
			}
			ctx.fillRect(x,y,50,50)
			/*
			设置一个yTag  
				y>=350  yTag=0  y--
				y<=0    yTag=1  y++

			*/
			if(y>=350){
				// y--;
				yTag=0;
			}

			if(y<=0){
				yTag=1
			}

		},5)
		


	</script>
</body>
</html>